grid 布局

本篇笔记是看完阮一峰老师的grid 布局教程后，为加深记忆的笔记总结。

📃 基础概念

网格（Grid）
网格线（Grid lines）
网格轨道（Grid tracks）
网格单元格（Grid cell）
网格区域（Grid areas）
网格间隙（Gutters）
网格轴（Grid Axis）
网格行（Grid row）
网格列（Grid column）
网格单位 (fr)

网格特性

位置固定
弹性的轨道大小

容器属性 - content

行内的 grid：

display: inline-grid;
display: grid;

尺寸控制

列，同时控制宽度：grid-template-rows
行，同时控制高度：grid-template-columns

// 创建一个3x3列， 列宽为100px,行高为100px的网格
grid-template-columns: 100px 100px 100px;
grid-template-rows: repeat(3, 100px);

// 与上面等价
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(4, 1fr);

// 其他用法
grid-template-columns: 2fr repeat(3, 1fr)
grid-template-columns: 20px repeat(6, 1fr) 20px;

// 下图样式
grid-template-columns: repeat(5, 1fr 2fr);

百分比

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

// 使用repeat 可以方便的重复编写
// repeat(重复次数, 值)
.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%); //
  grid-template-rows: repeat(3, 33.33%);    //
}

自动填充 auto-fill

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr - 比例

// 表示采用两列，然后宽度平均计算
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

// 12列的杉栏布局
.container {
    grid-template-columns: repeat(12, 1fr);
}

// 与指定尺寸配合使用
.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr; // 第一列采用150px 第二列为的第三列的一般宽度
}

限制范围

// 让列宽保持在100px到1/3的容器宽度之间
.container {
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}

位置控制

间距控制

相关属性：

grid-row-gap - 行距
grid-column-gap - 列距
grid-gap - 简写

// 设置间距
.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

// 等价与
.container {
  grid-row: 20px 20px;
}

// 等价与
.container {
  grid-row: 20px;
}

区域（命名，别名）

对一些区域进行命名，方便用其他属性对其进行尺寸，位置等属性的定制

相关属性：

grid-template-areas

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

// 配合使用 "." 对不需要命名的区域进行忽略
grid-template-areas: "header header ."
                     "main main ."
                     "footer footer .";

联动属性：

grid-area - 可以指定元素采用具体那个别名的区域
网格线 - 区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

网格线的命名

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

布局顺序

相关属性：

grid-auto-flow

grid-auto-flow: row
grid-auto-flow: column

grid-auto-flow: row dense    //
grid-auto-flow: column dense // 填补错误，

项目对齐

相关属性：

justify-items - 设置单元格内容的水平位置（左中右）
align-items - 设置单元格内容的垂直位置（上中下）
place-items - align-items属性和justify-items属性的合并简写形式。
- place-items: align-items justify-items;

通用取值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

内容对齐

引用自元老师的图片（以后有空自己画一个）

相关属性：

justify-content - 整个内容区域在容器里面的水平位置（左中右）
align-content - 整个内容区域的垂直位置（上中下）
place-content - align-content属性和justify-content属性的合并简写形式
- place-content: align-content justify-content

通用取值（跟 flex 的 justify-content 类似）：
start
end
center
stretch
space-around
space-between
space-evenly

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

项目属性（item）

项目属性，既指作用在 item 上面的属性

设置起始网格（合并单元格）

项目的尺寸控制跟容器的有很大区别，按照传统设置宽和高的方式，那么容器层的行高和列宽已经做了，项目层面的尺寸则是对当前元素占用多少个区域，采用网格线来做尺寸单位。

相关属性：

grid-column-start - 左边框所在的垂直网格线
grid-column-end - 右边框所在的垂直网格线
grid-column - grid-column-start和grid-column-end的合并简写形式
grid-row-start - 上边框所在的水平网格线
grid-row-end - 下边框所在的水平网格线
grid-row - grid-row-start和grid-row-end的合并简写形式

注意：
行的网格线总数是：行数+1，起始为 1
列的网格线总数是：列数+1，起始为 1
使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

// 指定网格线索引
.item-1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

// 指定网格线的名字
.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

// 使用跨越合并
.item-1 {
  grid-column-start: span 2;
}

合并属性的使用：

// 用 "/" 分隔
.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

// 等同于
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

// 等同于
.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

斜杠以及后面的部分可以省略，默认跨越一个网格。

放置区域

相关属性：

grid-area - 属性指定项目放在哪一个区域。

// 将item1放置到区域 "e"
// 区域 "center" 通过容器上定义 "grid-template-areas" 属性定义
.item-1 {
  grid-area: center;
}

内容对齐

item 内部的对齐方式

相关属性：

justify-self - 设置单元格内容的水平位置（左中右），对应容器的justify-items属性，用法完全一致
align-self - 设置单元格内容的垂直位置（上中下），对应容器的align-items属性，用法完全一致
place-self - align-self 属性和 justify-self 属性的合并简写形式
- place-self: align-self justify-self;
- place-self: center center;
- 如果省略第二个值，place-self属性会认为这两个值相等

通用取值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

📃 基础概念​

网格特性​

容器属性 - content​

尺寸控制​

位置控制​

间距控制​

区域 （命名，别名）​

网格线的命名​

布局顺序​

项目对齐​

内容对齐​

项目属性（item）​

设置起始网格（合并单元格）​

放置区域​

内容对齐​

📃 基础概念

网格特性

容器属性 - content

尺寸控制

位置控制

间距控制

区域（命名，别名）

网格线的命名

布局顺序

项目对齐

内容对齐

项目属性（item）

设置起始网格（合并单元格）

放置区域

内容对齐